import React, { Component } from 'react';
import SearchInput from '../searchInput/Index';
import { NavBar } from 'antd-mobile';
import Axios from '../../untils/myaxios'
import './index.css';
import { withRouter } from 'react-router-dom';
class Catetory extends Component {
  state = {
    select_index: 0,   //左边选中数据得下标
    category_list: [],  //图片列表数据
    category_rightContent: [],  //右边图片信息  
  }
    //获取分类菜单数据
    getCategories = (params) => {
      Axios.get('categories').then((res) => {
        this.setCategories(res)
        // console.log(res);
      }).catch((err) => {
        console.log(err);
      })
    }
    // 设置分类菜单数据
    setCategories = (res,is_storage) => {
      // 缓存的数据
      let categories_cache={};
      // 判断is_storage是否为true
      if(is_storage){
        // 直接获取本地缓存中的数据
        categories_cache=JSON.parse(localStorage.getItem('categories_cache'))
      }else{
        categories_cache={
          data:Date.now(),
          category_list:res
        }
      }
      // 将数据缓存到本地中
      localStorage.setItem('categories_cache',JSON.stringify(categories_cache))
      this.setState({
        category_list:res,
        category_rightContent:res[0].children
      })
    }
    componentDidMount() {
      //获取本地缓存
      let categories_cache=localStorage.getItem('categories_cache');
      // 判断是否为空
      if(categories_cache){
        // 判断是否过期
        let nowTime=Date.now();
        // 获取存储时得时间
        let storage_time=JSON.parse(categories_cache).data;
        if(nowTime-storage_time>60*60*1000){
          // 已经过期
          this.getCategories();
        }else{
          // 没有过期
          this.setCategories(JSON.parse(categories_cache).category_list,true)
        }
      }else{
        this.getCategories();
      }
    }
  getcontent = (e) => {
    // 获取选中元素的data-index
    let select_index = e.target.getAttribute('data-index');
    // console.log(select_index);
    this.setState({
      select_index: parseInt(select_index),
      category_rightContent: this.state.category_list[select_index].children
    })
  }
  getProductDetail=(e) => {
    let cat_id=e.target.getAttribute('data-index');
    // console.log(cat_id);
    this.props.history.push('/goodList/'+cat_id)
  }
  
  render() {
    return (
      <div className="yg-category">
        <div className="yg-category-title">
          <NavBar className="category-title">优购商城</NavBar>
        </div>
        {/* 顶部搜索框开始 */}
        <div className="yg-category-search">
          <div className="category-search-item">
            <SearchInput></SearchInput>
          </div>
        </div>
        {/* 顶部搜索框结束 */}
        {/* 内容部分开始 */}
        <div className="yg-category-content">
          <div className="category-content-left" onClick={this.getcontent}>
            {this.state.category_list.map((v, i) => {
              return <div className={this.state.select_index === i ? "active content-left-item" : "content-left-item"} key={v.cat_id} data-index={i}>
                {v.cat_name}
              </div>
            })}
          </div>
          <div className="category-content-right">
            {this.state.category_rightContent.map((v, j) => {
              return (
                <div className="content-right-item" key={j}>
                  {/* 二级菜单标题开始 */}
                  <div className="right-item-title">
                    {'/'}
                    {v.cat_name}
                    {'/'}
                  </div>
                  {/* 二级菜单标题结束 */}
                  {/* 产品列表开始 */}
                  <div className="product-list" onClick={this.getProductDetail}>
                    {v.children && v.children.map((item, k) => {
                      return (
                        <div className="product-list-item" key={k}>
                          <img src={item.cat_icon} alt="" data-index={item.cat_id} />
                          <div className="title">{item.cat_name}</div>
                        </div>
                      )
                    })}
                  </div>
                  {/* 产品列表结束 */}
                </div>
              )
            })}
          </div>
        </div>
        {/* 内容部分结束 */}
      </div>
    );
  }
}

export default withRouter(Catetory);
